<template>
  <div class="add-category">
    <el-card>
      <div class="header" slot="header">添加商品分类</div>
      <div class="card-body">
        <div class="btns">
          <el-button type="primary" plain @click="visiable = true">
            添加一级分类
          </el-button>
          <el-button type="success" plain @click="subCategory">
            添加二级分类
          </el-button>
        </div>
        <el-form
          class="category-form"
          label-width="120px"
          :model="category"
          :rules="rules"
          ref="categoryForm"
        >
          <template v-if="visiable">
            <el-form-item label="一级分类名称" prop="category_name">
              <el-input
                placeholder="一级分类名称"
                v-model="category.category_name"
              ></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="一级分类名称">
              <el-select
                v-model="category.parent_id"
                filterable
                placeholder="请选择一级分类名称"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.category_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类名称" prop="category_name">
              <el-input
                placeholder="二级分类名称"
                v-model="category.category_name"
              ></el-input>
            </el-form-item>
          </template>

          <el-button type="primary" @click="addCategory">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { addGoodsCategory, getSuperCategory } from "@/api/Goods";
export default {
  data() {
    return {
      // 一级分类还是二级分类添加标记
      visiable: true,
      category: {
        category_name: "",
        parent_id: null,
      },
      rules: {
        category_name: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
      },
      // 一级分类名称数据
      options: [],
    };
  },
  methods: {
    //点击添加二级分类按钮，加载一级分类数据
    subCategory() {
      this.visiable = false;
      //   调用接口加载一级分类数据
      getSuperCategory({ parent_id: null }).then((resp) => {
        let respData = resp.data;
        if (respData.code == 20000) {
          this.options = respData.data;
        }
      });
    },
    // 调用后台接口添加分类
    addCategory() {
      this.$refs.categoryForm.validate((data) => {
        if (data) {
          addGoodsCategory(this.category).then((resp) => {
            let respData = resp.data;
            if (respData.code == 20000) {
              this.$router.push("/category/GoodsCategoryList");
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs.categoryForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.category-form {
  width: 400px;
}
.btns {
  margin-bottom: 20px;
}
</style>
